<!-- 
* 苏州海管家物流科技有限公司（https://www.hgj.com/）.
* 苏公网安备32059002003385号© 2015-2022 Hgj.com All Rights Reserved. | 苏ICP备15030950号.
* @Date: 2022.05.21.
* @Author
* @Description 企点管理后台 - 线索管理 模块.
-->
<script setup lang="ts" name="ClueManage">
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import urls from '@/api/urls'
import { IKey } from "@/typings"

import {deleteData, postData} from '@/api/index'
import QueryCondition from '@/components/QueryCondition.vue'
import Pagination from '@/components/Pagination.vue'

let params = {
    num: 0,
    size: 10,
    phoneNum: '',
    submitEnd: '',
    submitStart: '',
    companyName: ''
}

const queryList = ref([{
    id: 'companyName',
    value: '',
    defaultValue: '',
    typeName: 'input',
    label: "企业名称",
    placeholder: '请输入企业名称'
}, {
    id: 'phoneNum',
    value: '',
    defaultValue: '',
    typeName: 'input',
    label: "手机号",
    placeholder: '请输入手机号'
}, {
    id: '__dateRange$submitStart$submitEnd',
    value: '',
    defaultValue: '',
    typeName: 'daterange',
    label: "提交时间",
    startPlaceholder: '开始日期',
    endPlaceholder: '结束日期'
}])

let total = ref(0)
const tableData = ref()
/**
 *@Description 分页 current-change 触发事件.
 *@Return .
**/
const getClueList = async () => {
    const res = await postData(urls.clueListUrl, { ...params })

    total.value = res.data.total
    tableData.value = [...res.data.records]
    console.log('tableData---------', tableData.value)
}
/**
 *@Description 查询组件 查询按钮 emit 方法监听 .
 *@Return { id: value }.
**/
const renderSearch = (data: IKey) => {
    console.log('renderSearch--------', data)
    params = {...params, ...data}
    getClueList()
}
/**
 *@Description 查询组件 重置按钮 emit 方法监听 .
 *@Return { id: defaultValue }.
**/
const renderReset = (data: IKey) => {
    console.log('renderReset', data)
    params = {...params, ...data}
    params.submitEnd = ''
    params.submitStart = ''
    getClueList()
}
/**
 *@Description 删除 .
 *@Return .
**/
const handleDelClick = async (row: { id: string }) => {
    try {
        await ElMessageBox.confirm('确定删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
        await deleteData(`${urls.delClueUrl}/${row.id}`)
        await getClueList()
    } catch (e) {
        console.log(e)
    }
}
/**
 *@Description 标记 .
 *@Return .
**/
const handleMarkClick = async (row: {id: string, signFlag: boolean}) => {
    const params = {
        id: row.id,
        signFlag: !row.signFlag
    }
    await postData(urls.clueSignUrl, {...params})
    await getClueList()
}
/**
 *@Description 分页 current-change 触发事件.
 *@Return .
**/
const handlePageChange = (val: number) => {
    console.log(`current page: ${val}`)
    getClueList()
}
/* // 表格第一列
   const firstColumn = {
       label: '序号',
       type: 'index'
   }
   // 表头
   const tableColumn = [{
       label: '提交时间',
       prop: "submitTime"
   }, {
       label: '企业名称',
       prop: "companyName"
   }, {
       label: '手机号',
       prop: "phoneNum"
   }]
   // 表格操作区
   const tableOperation = [{
       label: '标记',
       color: ''
   }, {
       label: '取消标记',
       color: ''
   }, {
       label: '删除',
       color: 'red'
   }] */
getClueList()
</script>

<template>
  <!-- 查询区域 -->
  <QueryCondition title="我是父组件标题" :queryList="queryList" @emitSearch="renderSearch" @emitReset="renderReset" />
  <!-- table -->
  <el-table ref="table" :data="tableData" border>
    <el-table-column align="center" label="序号" type="index" :index="index => params.size * (params.num - 1) + index + 1" width="80" />
    <el-table-column label="提交时间" prop="submitTime" />
    <el-table-column label="企业名称" prop="companyName" />
    <el-table-column label="手机号" prop="phoneNum" />
    <el-table-column label="操作">
      <template #default="{ row }">
        <span class="cursor-pointer" @click="handleMarkClick(row)">{{ row.signFlag ? '取消标记' : '标记' }}</span>
        <span class="cursor-pointer" @click="handleDelClick(row)">删除 </span>
      </template>
    </el-table-column>
  </el-table>

  <div>
    {{ params.size }}
    {{ params.num }}
  </div>

  <div class="text-center">
    <Pagination :total="total" :size="params.size" :num="params.num" @emitCurrentPage="handlePageChange"></Pagination>
    <el-pagination
      small background layout="prev, pager, next" :total="total" :page-size="params.size"
      @current-change="handlePageChange" v-model:current-page="params.num" />
  </div>
</template>

<style lang="scss" scoped></style>
